<template>
  <div class="" style="width: 1300px; margin: auto; margin-top: 100px">
    <p style="margin-top: 30px; font-size: 18px; font-weight: 700">
      Genes Name
    </p>

    <el-table
      height="500"
      empty-text="no pathway found"
      style="width: 100%"
      :header-cell-style="{textAlign: 'center'}"
      :cell-style="{
        textAlign: 'center',
      }"
      :data="data.tableData"
    >
      <el-table-column center prop="gene" label="Input" />
      <el-table-column center prop="date" label="Cancer associated Gene">
        <template #default="scope">
          <img
            v-if="scope.row.flag == 0"
            style="width: 30px"
            :src="src"
            alt=""
          />
          <img v-else style="width: 32px" :src="srcs" alt="" />
        </template>
      </el-table-column>
      <el-table-column center prop="cancer" label="Cancer" />
    </el-table>

    <div
      style="
        text-align: center;
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 10px;
      "
    >
      <!-- <el-pagination
        v-model:current-page="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[10, 20, 30, 50]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      /> -->
    </div>
  </div>
  <div
    style="
      position: absolute;
      bottom: 50px;
      z-index: 999999;
      left: 50%;
      transform: translateX(-50%);
    "
  >
    <el-button @click="ju" type="primary">Confirmed for enrichment</el-button>
  </div>
</template>

<script setup>
import {ref, onMounted, reactive, onUpdated} from "vue";
import {useRouter, useRoute} from "vue-router";
import {useCounterStore} from "../../pina/index";
import {analysis} from "../../api/index";

const router = useRouter();

const route = useRoute();
const store = useCounterStore();

const data = reactive({
  tableData: [],
});
let cancerValue = ref("");

const getd = async () => {
  const paramss = new URLSearchParams();
  JSON.parse(route.query.list).forEach((item) => {
    paramss.append("checkList", item);
  });

  let datas = await analysis(paramss);
  if (datas.code == 200) {
    const mergeData = (data) => {
      const merged = {};

      datas.data.forEach((item) => {
        const key = `${item.gene}`;

        if (!merged[key]) {
          merged[key] = {
            gene: item.gene,
            dataset: item.dataset,
            cancer: item.cancer,
            flag: item.flag,
          };
        } else {
          merged[key].cancer += `,${item.cancer}`;
        }
      });

      return Object.values(merged);
    };

    const mergedData = mergeData(data);
    console.log(mergedData);
    data.tableData = mergedData;
  }
};
onMounted(() => {
  getd();
});
const ju = () => {
  let a = [];
  data.tableData.forEach((element) => {
    a.push(element.gene);
  });

  let b = Array.from(new Set(a));

  router.push({
    name: "amalysisDetails",

    query: {list: JSON.stringify(b)},
  });
};
const src = ref(new URL("../../assets/错误.png", import.meta.url).href);
const srcs = ref(new URL("../../assets/正确.png", import.meta.url).href);
</script>

<style></style>
